
 <template>
  <div class="Slider">
    <swiper
      :slidesPerView="1"
      :spaceBetween="30"
      :centeredSlides="true"
      :loop="true"
      :autoplay="{
        delay: 1500,
        disableOnInteraction: false,
      }"
      :pagination="{
        clickable: true,
      }"
      :modules="modules"
      class="mySwiper"
    >
      <swiper-slide
        ><div style="width: 1920px">
          <img :src="sliderArr[0]" /></div
      ></swiper-slide>
      <swiper-slide
        ><div style="width: 1920px"><img :src="sliderArr[1]" /></div
      ></swiper-slide>
      <swiper-slide
        ><div style="width: 1920px"><img :src="sliderArr[2]" /></div
      ></swiper-slide>
    </swiper>
    <div class="shadow"></div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "swiper/vue";

// Import Swiper styles
import "swiper/css";

import "swiper/css/pagination";
import "swiper/css/navigation";

// import required modules
import { Autoplay, Pagination, Navigation } from "swiper";

export default {
  components: {
    Swiper,
    SwiperSlide,
  },
  props: {
    sliderArr: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  setup() {
    return {
      modules: [Autoplay, Pagination, Navigation],
    };
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.Slider {
  width: 100%;
  margin: auto;
  text-align: center;
  div {
    margin: auto;
  }
  .Sliderimage {
    width: 100%;
    height: 31px;
  }
}
img {
  width: 100%;
  height: 400px;
}
/deep/ .swiper-pagination-bullet-active {
  background-color: #a7120c;
}
/deep/ .swiper-container-horizontal > .swiper-pagination-bullets {
  left: -20px;
}
.swiper-pagination {
  text-align: right;
}
</style>
